const path = require('path')
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {ModuleFederationPlugin} =require('webpack').container

module.exports={
    mode:'development',
    devtool:false,
    entry:path.resolve(__dirname, './src/index.js'),//入口文件
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')
        // publicPath:'auto', 
        //指定应用程序中所有资源的基础路径
    },
    module:{  //载入loader
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },{
                test:/\.css$/, //用正则表达式匹配文件类型
                use:['style-loader',
                {
                    loader:'css-loader',
                    options:{
                        esModule:false
                    }
                }]
            },{
                test:/\.(png|jpe?g|svg|gif)$/,
                type:'asset',
                generator:{  //相当于使用file-loader
                    filename:"img/[name][ext]"
                },
                parser:{  //相当于使用url-loader
                    dataUrlCondition:{
                        maxSize:20*1024
                    }
                }
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:"test",
            template:'./public/index.html'
        }),
        new VueLoaderPlugin(),
        new ModuleFederationPlugin({
            name: 'child1',
            filename: 'remoteEntry.js',
            exposes: {
                './HotTopic': './src/components/HotTopic.vue',
                './DailySongs': './src/components/DailySongList.vue',
                './Button':'./src/components/Button.js',
                './gedanList':'./src/components/GedanSongs.vue',
                "./Content": "./src/components/Content.vue",
            },
            shared: {
                vue: {
                    singleton: true,
                    eager:true
                },
                'axios':{
                    singleton: true
                },
                'swiper/swiper-bundle.css':{
                    singleton: true
                },
                'swiper/esm/components/autoplay/autoplay.js':{
                    singleton: true
                },
                'swiper':{
                    singleton: true
                }
            },
        }),
    ],
    devServer: {
        compress: true,
        port: 3002,
        hot: true,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
          'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
        },
    },
}